<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冒泡租售，专业的综合网上租售平台,汽车、房屋，电器</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="css/yangshi.css">
    <style>
        button {
            width: 70px;
            height: 30px;
            line-height: 30px;
            font-size: 24px;
            outline: none;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .rent {
            width: 70px;
            height: 30px;
            background-color: coral;
            position: relative;
            left: 80px;
            bottom: 0px;
            font-size: 12px;
            outline: none;
            cursor: pointer;
            border: none;
            border-radius: 4px;
        }

        .buy {
            width: 70px;
            height: 30px;
            background-color: coral;
            position: relative;
            left: 0px;
            bottom: 30px;
            font-size: 12px;
            outline: none;
            cursor: pointer;
            border: none;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <div class="top">
        <div class="logo">
            <img src="img/rent_logo.png" alt="">
        </div>
        <div class="search">
            <input type="text" placeholder="搜索">
            <button class="icon-search"></button>
        </div>
        <div class="login">
            <a href="login.html">登录/注册</a>
        </div>
    </div>
    <ul class="menu">
        <li>公司介绍</li>
        <li>产品中心</li>
        <li>公司市场</li>
        <li>租借事项</li>
        <li>租费及结算</li>
        <li>会员中心</li>
        <li>违章查询</li>
        <li>联系我们</li>
    </ul>
    <div class="banner">
        <div class="i_content">
            <div class="images">
                <a><img src="img/car1.jpg"></a>
                <a><img src="img/car2.jpg"></a>
                <a><img src="img/car3.jpg"></a>
                <a><img src="img/car4.jpg"></a>
                <a><img src="img/car5.jpg"></a>

                <div class="leftBtn" onclick="goLeft()"></div>
                <div class="rightBtn" onclick="goRight()"></div>

                <ul>
                    <li class="select"></li>
                    <li class="normal"></li>
                    <li class="normal"></li>
                    <li class="normal"></li>
                    <li class="normal"></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="leftMenu">
        <ul>
            <li><a>豪车<em class="icon-arrow_right"></em></a></li>
            <li><a>婚车<em class="icon-arrow_right"></em></a></li>
            <li><a>货车<em class="icon-arrow_right"></em></a></li>
            <li><a>别墅<em class="icon-arrow_right"></em></a></li>
            <li><a>海景房<em class="icon-arrow_right"></em></a></li>
            <li><a>出租屋<em class="icon-arrow_right"></em></a></li>
            <li><a>空调<em class="icon-arrow_right"></em></a></li>
            <li><a>电视<em class="icon-arrow_right"></em></a></li>
            <li><a>电脑<em class="icon-arrow_right"></em></a></li>
            <li><a>生活<em class="icon-arrow_right"></em></a></li>
        </ul>
    </div>
    <div class="rightMenu">
        <div class="title">
            <h2>企业资讯/News</h2>
        </div>
        <ul>
            <li>欢迎加入我们的大家庭</li>
            <li>车主洗车存在的误区</li>
            <li>冬季保养雨刷器的六要素</li>
            <li>看修车新攻略</li>
            <li>租赁业管理暂行新规定</li>
            <li>冬季保养雨刷器的六要素</li>
            <li>看修车新攻略</li>
            <li>租赁业管理暂行新规定</li>
        </ul>
    </div>
    <div class="goods">
        <div class="hd">
            <ul v-for="k in objectlist" :key="k.id">
                <button class="head" @click="getAllList(k.object)">{{k.object}}</button>
            </ul>
        </div>
        <div class="goods_list">
            <ul>
                <li v-for="item in goodlist" :key="item.id">
                    <a>
                        <img :src="item.img">
                        <h3>{{item.goodname}}</h3>
                        <p class="price">租价：{{item.goodprice}} /天</p>
                        <p class="price">售价：{{item.goodsell}} 元</p>
                        <p class="desc">库存：{{item.stock}}</p>
                        <a href="./html/login.html">
                            <button class="rent">
                                租用</button>
                        </a>
                        <a href="./html/login.html">
                            <button class="buy">
                                购买</button>
                        </a>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>
<script src="js/bannner.js"></script>
<script src="js/vue.js"></script>
<script src="js/vue-resource.min.js"></script>
<script>
    var vm = new Vue({
        el: ".goods",
        data: {
            username: '',
            name: '',
            objectlist: [],
            goodlist: [],
        },
        methods: {
            getObject: function () {
                this.$http.get('php/object.php').then(function (result) {
                    this.objectlist = result.body;
                })
            },
            getAllList: function (object) {
                console.log(object);
                this.$http.post('php/user_show.php', {
                    object: object
                }, {
                    emulateJSON: true
                }).then(function (result) {
                    this.goodlist = result.body;
                })
            }
        },
        created() {
            this.getObject();
        }
    })
</script>

</html>